<!--评论模块-->
<template>
  <div class="comments_box">
    <div class="comment" v-for="(item,index) in comments_list " :key="index">
      <div class="comment_content">
        <div class="content_head">
          <router-link :to="{path:'/user/'+item.user_id}" target="_blank">
            <img class="avatar" :src="item.userAvatar" />
          </router-link>

          <div class="content_box">
            <div class="name">
              <router-link :to="{path:'/user/'+item.user_id}" target="_blank">{{item.username}}</router-link>
            </div>
            <div class="content">{{item.comments_content}}</div>
          </div>
        </div>

        <div class="reply_content">
          <div class="comment_date">{{item.comments_date | timeAgo}}</div>
          <div class="reply_btn" @click="showCommentInput(item)">
            <!-- 图标 -->
            <i class="iconfont icon-pinglun2"></i>
            <span>回复</span>
          </div>
        </div>
      </div>

      <!-- 回复评论输入框 -->
      <transition name="fade">
        <div class="comment_wrapper" v-if="showCommentId === item.comments_id">
          <input
            class="gray-bg-input"
            v-model="inputComment"
            type="textarea"
            :rows="3"
            autofocus
            v-focus
            :placeholder="placeholder"
          />
          <div class="btn-control">
            <span class="cancel" @click="clear_hideInput">取消</span>
            <Button
              class="btn"
              type="primary"
              :disabled="!inputComment"
              round
              @click="commitComment"
            >评论</Button>
          </div>
        </div>
      </transition>

      <!-- 回复模块 -->
      <div class="reply">
        <div class="item" v-for="(reply,index) in item.replys" :key="index">
          <div class="reply-content">
            <router-link :to="{path:'/user/'+reply.from_user_id}" target="_blank">
              <img class="avatar" :src="reply.from_user_avatar" />
            </router-link>
            <div class="reply_box">
              <div class="name">
                <router-link
                  :to="{path:'/user/'+reply.from_user_id}"
                  target="_blank"
                >{{reply.from_user_name}}</router-link>
              </div>
              <div class="content">
                <span>回复</span>
                &nbsp
                <router-link
                  :to="{path:'/user/'+reply.to_user_id}"
                  target="_blank"
                >{{reply.to_user_name}}</router-link>
                : {{reply.reply_content}}
              </div>
            </div>
          </div>

          <div class="reply-bottom">
            <span class="reply_date">{{reply.reply_date | timeAgo}}</span>
            <span class="reply_btn" @click="showCommentInput(item, reply)">
              <i class="iconfont icon-pinglun2"></i>
              <span>回复</span>
            </span>
          </div>

          <!-- 回复回复输入框 -->
          <transition name="fade">
            <div class="reply-wrapper" v-if="showReplyId === reply.reply_id">
              <input
                class="gray-bg-input"
                v-model="inputComment"
                autofocus
                v-focus
                :placeholder="placeholder"
              />
              <div class="btn-control">
                <span class="cancel" @click="clear_hideInput">取消</span>
                <Button
                  class="btn"
                  type="primary"
                  :disabled="!inputComment"
                  round
                  @click="commitComment"
                >评论</Button>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    comments: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      comments_list: [],
      inputComment: "",
      showCommentId: "", //展示评论输入框
      showReplyId: "", //展示回复输入框
      placeholder: "", //input占位文本
      current_comments_id: "", //需要在该评论id下进行评论的回复，或回复的回复
      to_user: "", //要回复的user对象id
      isLoading: false
    };
  },
  watch: {
    comments(val) {
      this.comments_list = val;
    }
  },

  methods: {
    /**
     * 点击取消按钮
     */
    clear_hideInput() {
      this.$set(this, "inputComment", "");
      this.$set(this, "showCommentId", "");
      this.$set(this, "showReplyId", "");
      this.$set(this, "placeholder", "");
    },

    /**
     * 提交评论
     */
    commitComment() {
      let isLogin = this.$store.state.isAuthenticated;
      let uid = this.$store.state.user.uid;
      if (isLogin) {
        if (!this.isLoading) {
          this.isLoading = true;
          this.$axios
            .post("/sendReply", {
              comments_id: this.current_comments_id,
              myid: uid,
              to_userid: this.to_user,
              reply_content: this.inputComment
            })
            .then(res => {
              this.isLoading = false;
              if (res.data.code == 0) {
                // 提醒父组件重新获取评论
                this.$emit("re_getcomments");
                // 关闭输入框，清空信息
                this.clear_hideInput();
              } else {
                // 回复失败
                this.$Message.error({
                  background: true,
                  content: "回复失败",
                  duration: 2.5
                });
              }
            })
            .catch(err => {
              console.log(err.response);
            });
        } else {
          return;
        }
      } else {
        // 弹出登录框
        this.$store.dispatch("setIsToLogin", true);
      }
    },

    /**
     * 点击评论按钮显示输入框
     * item: 当前大评论
     * reply: 当前回复的评论
     */
    showCommentInput(item, reply) {
      let isLogin = this.$store.state.isAuthenticated;
      let uid = this.$store.state.user.uid;
      if (isLogin) {
        this.clear_hideInput();
        if (reply) {
          this.placeholder = "@" + reply.from_user_name + " ";
          this.showReplyId = reply.reply_id;
          this.to_user = reply.from_user_id;
          this.current_comments_id = reply.reply_comments_id;
        } else {
          this.placeholder = "@" + item.username + " ";
          this.showCommentId = item.comments_id;
          this.to_user = item.user_id;
          this.current_comments_id = item.comments_id;
        }
      } else {
        // 弹出登录框
        this.$store.dispatch("setIsToLogin", true);
      }
    }
  },
  // 添加input自动获取焦点的自定义指令 v-focus
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.focus();
      }
    }
  }
};
</script>

<style lang="scss">
$color-main: #409eff;
$color-success: #67c23a;
$color-warning: #e6a23c;
$color-danger: #f56c6c;
$color-info: #909399;

$text-main: #303133;
$text-normal: #606266;
$text-minor: #909399; //次要文字
$text-placeholder: #c0c4cc;
$text-333: #333;

$border-first: #dcdfe6;
$border-second: #e4e7ed;
$border-third: #ebeef5;
$border-fourth: #f2f6fc;

$content-bg-color: #fff;
.comments_box {
  padding: 0 18px;
  box-sizing: border-box;
  .comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid $border-fourth;
    .comment_content {
      display: flex;
      flex-direction: column;
      .content_head {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        .avatar {
          width: 2.5rem;
          height: 2.5rem;
        }
        .content_box {
          margin-left: 0.7rem;
          .name {
            a {
              font-size: 0.9rem;
              line-height: 1.4;
              color: #000;
            }
          }
          .content {
            font-size: 0.8rem;
            line-height: 1.8;
            margin-top: 0.3rem;
            word-wrap: break-word;
            white-space: pre-wrap;
            word-break: break-all;
            color: #505050;
          }
        }
      }
      .reply_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;
        color: #b3b3b3;
        font-size: 0.8rem;
        .comment_date {
          margin-left: 3.2rem;
        }
        .reply_btn {
          display: flex;
          align-items: center;
          cursor: pointer;
          .icon-pinglun2 {
            font-size: inherit;
          }
          span {
            margin-left: 0.5rem;
          }
        }
        .reply_btn:hover {
          color: #808695;
        }
      }
    }
    .comment_wrapper {
      display: flex;
      flex-direction: column;
      margin-top: 0.5rem;
      margin-left: 3.2rem;
      padding: 0.5rem;
      background-color: #fafbfc;
      align-items: flex-end;
      .gray-bg-input {
        height: 2rem;
        width: 100%;
        padding: 0 0.5rem;
        border: 1px solid #eee;
        border-radius: 4px;
        outline: none;
      }
      .gray-bg-input:focus {
        border: 1px solid #007fff;
      }
      .btn-control {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 10px;
        .cancel {
          font-size: 16px;
          color: $text-normal;
          margin-right: 20px;
          cursor: pointer;
          &:hover {
            color: $text-333;
          }
        }
      }
    }

    .reply {
      margin: 1rem 0 0 3.2rem;
      background-color: #fafbfc;
      display: flex;
      flex-direction: column;
      .item {
        padding: 0.5rem;

        .reply-content {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          font-size: 14px;
          color: $text-main;
          .avatar {
            width: 2.5rem;
            height: 2.5rem;
          }
          .reply_box {
            margin-left: 0.5rem;
            .name {
              a {
                font-size: 0.9rem;
                line-height: 1.4;
                color: #000;
              }
            }
            .content {
              font-size: 0.8rem;
              line-height: 1.8;
              margin-top: 0.3rem;
              word-wrap: break-word;
              white-space: pre-wrap;
              word-break: break-all;
              color: #505050;
            }
          }
        }
        .reply-bottom {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-top: 0.5rem;
          color: #b3b3b3;
          font-size: 0.8rem;
          .reply_date {
            margin-left: 3rem;
          }
          .reply_btn {
            display: flex;
            align-items: center;
            cursor: pointer;
            .icon-pinglun2 {
              font-size: inherit;
            }
            span {
              margin-left: 0.5rem;
            }
          }
          .reply_btn:hover {
            color: #808695;
          }
        }
        .reply-wrapper {
          display: flex;
          flex-direction: column;
          margin-top: 0.5rem;
          margin-left: 3.2rem;
          padding: 0.5rem;
          background-color: #fff;
          align-items: flex-end;
          .gray-bg-input {
            height: 2rem;
            width: 100%;
            padding: 0 0.5rem;
            border: 1px solid #eee;
            border-radius: 4px;
            outline: none;
          }
          .gray-bg-input:focus {
            border: 1px solid #007fff;
          }
          .btn-control {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-top: 10px;
            .cancel {
              font-size: 16px;
              color: $text-normal;
              margin-right: 20px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
            }
          }
        }
      }
    }
  }
}
</style>
